<template>
  <div class="detail-main">
    <el-dialog
      :title="'班级信息 --'+titleStatus "
      :visible.sync="show"
      width="60%"
      @close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="文章标题">
              <el-input v-model="form.title" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作者">
              <el-input v-model="form.author" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="摘要">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="最热">
          <el-switch
            v-model="form.hot"
            active-color="#13ce66"
            inactive-color="#e5e5e5"
            active-value="0"
            inactive-value="1"
          />
        </el-form-item>
        <el-form-item label="封面图片">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-button type="primary" size="small" @click="openMat(0)">选择图片</el-button>
            </el-col>
            <el-col :span="12">
              <!-- <image style="width:120px;height:40px;" fit="contain" :src="form.cover" lazy></image> -->
              <img style="width:120px;height:40px;object-fit:contain" :src="form.cover" alt>
            </el-col>
            <el-col :span="4">
              <el-button v-if="form.cover" style="color:red" type="text" @click="removeCover">删除</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="文章显示封面">
          <el-switch
            v-model="form.coverShow"
            active-color="#13ce66"
            inactive-color="#e5e5e5"
            active-value="0"
            inactive-value="1"
          />
        </el-form-item>
        <el-form-item label="切换富文本类型">
          <el-row>
            <el-col :span="6">
              <el-radio-group v-model="form.type" @change="editorTypeChange">
                <el-radio label="0">富文本</el-radio>
                <el-radio label="1">markdown</el-radio>
              </el-radio-group>
            </el-col>
            <el-col :span="12">
              <span style="color: #E6A23C;margin-left:50px;">
                <i class="el-icon-warning" /> 切换编辑器会清空内容,请谨慎操作.
              </span>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" size="mini" @click="openMat(1)">插入素材↓↓</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="editor-box">
        <Tinymac v-show="form.type=='0'" ref="tin" v-model="mdContent" />
        <MarkdownEditor v-show="form.type=='1'" ref="md" />
      </div>
      <span slot="footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="doSave">确 定</el-button>
      </span>
      <Materials ref="mat" @handle-cover-sel="handleCoverSel" />
    </el-dialog>
  </div>
</template>
<script>
import articleApi from '@/api/content/article'
import { resetData } from '@/utils/index'
import Materials from '../imgs'
import Tinymac from '@/components/Tinymce'
import MarkdownEditor from '@/components/MarkdownEditor'

export default {
  name: 'ContentDetail',
  components: {
    Materials,
    Tinymac,
    MarkdownEditor
  },
  data() {
    return {
      show: false,
      titleStatus: '新增',
      form: {
        cover: '',
        type: '0' // '0' 富文本 ; '1' markdown
      },
      mdContent: '' // markdown的初始化内容
    }
  },
  mounted() {},
  methods: {
    openDialog(id) {
      this.show = true
      var api = null
      if (id) {
        this.titleStatus = '编辑'
        articleApi
          .detail({
            id
          })
          .then(res => {
            this.form = res.data
            this.$nextTick(() => {
              // 初始化内容
              if (this.form.type == '0') {
                this.setTin(this.form.content1)
              } else {
                //   this.mdContent = this.form.content1;
                this.setMd(this.form.content1)
              }
            })
          })
      }
    },
    handleClose() {
      resetData(this, 'form')
      // 清空富文本
      this.resetEditor()
      this.show = false
    },
    // 打开素材
    // type: 0 选择封面 /  1 选择富文本
    openMat(type) {
      this.$refs.mat.openDialog(type)
    },
    doSave() {
      var api = null
      // 有id为编辑  否则为保存
      if (this.form.id) {
        api = articleApi.updateArticle
      } else {
        api = articleApi.saveArticle
      }

      // 富文本
      if (this.form.type == '0') {
        // content1 一般是富文本/markdown原文本
        // content2 转码的html
        this.form.content1 = this.form.content2 = this.getTin()
      } else {
        this.form.content1 = this.getMd().val
        this.form.content2 = this.getMd().html
      }
      api({
        xyNews: {
          ...this.form
        }
      }).then(res => {
        if (res.code) {
          this.$message.success('保存成功!')
          this.handleClose()
          this.$parent.getArticleList()
        } else {
          this.$message.error('保存失败!')
        }
      })
    },
    handleCoverSel(url) {
      this.form.cover = url
    },
    removeCover() {
      this.form.cover = ''
    },
    editorTypeChange() {
      this.form.content1 = this.form.content2 = ''
      this.resetEditor()
    },
    getTin() {
      var content = this.$refs.tin.getContent()
      return content
    },
    setTin(v) {
      // 保证script加载完毕
      this.$refs.tin.onload(() => {
        this.$refs.tin.setContent(v)
      })
    },
    setMd(v) {
      this.$refs.md.setValue(v)
    },
    getMd() {
      var html = this.$refs.md.getHtml()
      var val = this.$refs.md.getValue()
      return {
        html,
        val
      }
    },
    resetEditor() {
      if (this.$refs.md) {
        this.$refs.md.setValue('')
      }
      if (this.$refs.tin) {
        this.$refs.tin.setContent('')
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.detail-main {
}
</style>
